<template>
  <div class="content">
    <div>
      <van-nav-bar class="nav-bar-style" left-arrow @click-left="onClickLeft">
        <template #title>
          <div class="nav-bar-title-style">出库物料</div>
        </template>
        <template #left>
          <van-icon size="30" name="arrow-left" color="#FFF" />
        </template>
      </van-nav-bar>
    </div>

    <!-- <div class="billDetailStyle">
      <div class="leftLi">
        <span class="title">单据号&emsp;</span>
        <span class="desc">{{outStorageDetail.outStorageNo}}</span>
      </div>

      <div class="leftLi">
        <span class="title">单据来源</span>
        <span class="desc">{{outStorageDetail.requestDeptName}}</span>
      </div>
      <div class="leftLi">
        <span class="title">申请人</span>
        <span class="desc">{{outStorageDetail.applyUser}}</span>
      </div>
      <div class="leftLi">
        <span class="title">申请时间</span>
        <span class="desc">{{$moment(outStorageDetail.applyTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
      </div>
    </div> -->

    <div>
      <div class="titleSignalStyle">
        <img src="@/assets/ic_left_blue_signal.png" width="5px" height="22px" />
        <span class="titleSignalTextValue">待出库物料</span>
      </div>

      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          :offset="offset"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onRefresh"
        >
          <van-cell>
            <div>
              <ul>
                <li
                  class="totoalItemStyle"
                  v-for="(item,index) in this.outStorageDetail"
                  :key="index"
                >
                  <div class="itemDescript">
                    <div class="leftLi">
                      <div class="title">物料名称&emsp;</div>
                      <div class="desc">{{item.materialName}}</div>
                    </div>
                    <div class="leftLi">
                      <div class="title">物料编号</div>
                      <div class="desc">{{item.materialCode}}</div>
                    </div>

                    <div class="leftLi">
                      <div class="title">待出库数量</div>
                      <div class="desc">{{item.number}}</div>
                    </div>
                    <div class="leftLi">
                      <div class="title">已扫条码</div>
                      <div class="desc">{{item.alreadyNumber}}</div>
                      <img
                        src="@/assets/ic_more.png"
                        width="26px"
                        height="26px"
                        class="scanCountMoreStyle"
                        @click="onClickMore(item)"
                      />
                    </div>
                  </div>
                  <div class="itemRightButtonStyle">
                    <van-button
                      class="btnStyle"
                      round
                      type="info"
                      plain
                      hairline
                      @click="skipToMaterialDetail(item)"
                      size="large"
                    >查看更多</van-button>
                  </div>
                </li>
              </ul>
            </div>
            <!-- <van-button @click="scanOutStorageDetail">测试扫码</van-button> -->
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>

    <div class="comitForm">
      <van-button type="info" @click="dosumit" class="btncont" :disabled="disabled">出库</van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import http from "@/utils/request.js";
import api from "@/utils/api";
import { List } from "vant";
import { PullRefresh } from "vant";
import { NavBar } from "vant";
import router from "@/router";
import Toast from "@/utils/toast";
import { TreeSelect } from "vant";
import { Overlay } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import { Picker } from "vant";
import { Dialog } from "vant";
Vue.use(List);
Vue.use(PullRefresh);
Vue.use(NavBar);
Vue.use(TreeSelect);
Vue.use(Overlay);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Picker);

export default {
  data() {
    return {
      stayNumber:0,
      disabled: false,
      outStorageId: "",
      outStorageDetail: {},
      show: false,
      page: 1, //请求第几页
      pageSize: 10, //每页请求的数量
      total: 0, //总共的数据条数
      offset: 0,
      loading: false,
      finished: false,
      refreshing: false,
      scanedBarCode: ""
    };
  },

  methods: {
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.loading = true;
      this.getOutStorageDetail();
    },

    skipToMaterialDetail(item) {
      this.$router.push({
        path: "/outStorageMaterialDetail",
        query: {
          materialId: item.materialId,
          id: this.$route.query.id
        }
      });
    },

    scanOutStorageDetail(scanedBarCode) {
      this.scanedBarCode = scanedBarCode;
      var param = {
        outStockId: this.$route.query.id,
        qrCode: scanedBarCode
        // qrCode: "3827066908763488258",
      };
      http.fetchGet(api.LimsGetScanCodeResult, param, "正在扫码,请稍后...").then(response => {
          if (response.code === 1) {
            this.onRefresh()
            // this.$router.push({
            //   path: "/outStorageWuliao",
            //   query: {
            //     row: response.data,
            //     id: this.$route.query.id,
            //     // outStorageNo: this.outStorageDetail.outStorageNo
            //   }
            // });
          }else if(response.code === 2){
            Dialog.alert({
              message: response.message
            });
          }
      }).catch(err => {
          Dialog.alert({
            title: "友情提示",
            message: err
          });
      });
    },
    onClickMore(item) {
      this.$router.push({
        path: "/OutCodeDetail",
        query: {
          outMaterialId: item.id,
          id: this.$route.query.id
        }
      });
    },
    getOutStorageDetail() {
      var param={
        outStockId:this.$route.query.id
      };
      http
        .fetchGet(api.LimsGetOutStockMaterialPdas, param, "正在加载出库单详情")
        .then(response => {
          this.outStorageDetail = response.data;
          this.outStorageDetail.forEach(item =>{
            item.stayNumber = item.number - item.alreadyNumber
          })
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
          this.count++;
        })
        .catch(err => {
          console.log(" catch err  is  " + err);
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
          this.count++;
        });
    },

    onClickSelectLeft(index) {
      this.regionActivieId = index;
    },
    onClickLeft() {
      router.push({ path: "/outStorage" });
    },

    scan() {
      window.AndroidWebView.scan();
    },
    barCodeScanInStorage(barCode) {
      Toast("scan succes and the barcode is  " + barCode);
    },
    dosumit() {
      var param = {
        outStockId: this.$route.query.id
      };
      http.fetchGet(api.LimsSubmitOutStock, param, "请稍后...").then(response => {
          if (response.code === 1) {
            Toast.success("出库成功");
            setTimeout(() => {
              router.push({ path: "/outStorage" });
            }, 500);
          } else if (response.code === 2) {
            Dialog.alert({
              title: "提示",
              message: response.message
            });
          }
      }).catch(err => {
          console.log(" catch err  is  " + err);
      });
    },
  },
  created() {
    window.scanOutStorageDetail = this.scanOutStorageDetail;
    // let quredOutStorageId = this.$route.query.outStorageId;
    // console.log("初始化 " + quredOutStorageId);
    // if (typeof quredOutStorageId == "undefined") {
    //   this.outStorageId = window.localStorage.getItem("outStorageId");
    // } else {
    //   this.outStorageId = quredOutStorageId;
    //   window.localStorage.setItem("outStorageId", this.outStorageId);
    // }
  }
};
</script>

<style scoped lang="scss">
/deep/ .van-pull-refresh {
  margin-top: 10px;
}
.totoalItemStyle {
  display: flex;
  flex-shrink: 1;
  font-size: 20px;
  align-items: flex-start;
  background-color: #fff;
  // margin-top: 20px;
  flex-grow: 1;
  width: 100%;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: center;
}
.itemDescript {
  width: auto;
  width: 72%;
  font-size: 20px;
}
.itemRightButtonStyle {
  text-align: flex-end;
  width: auto;
  align-items: flex-end;
  margin-right: 25px;
  width: 20%;
}
.leftLi {
  display: flex;
  width: 100%;
  line-height: 40px;
  font-size: 20px;
  word-break: keep-all;
  /* white-space: nowrap; */
  justify-content: flex-start;
  flex-direction: row;
  text-align: left;
}
.title {
  display: flex;
  // width: 25%;
  flex-wrap: nowrap;
  font-size: 20px;
  color: #999999;
  align-self: flex-start;
  align-items: flex-start;
  text-align: left;
}
.desc {
  width: auto;
  margin-left: 20px;
  font-size: 20px;
  color: #333333;
  text-align: left;
}
.btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 50px;
}

.van-button--primary {
  background-color: rgba(71, 124, 236, 1);
}
.nar-bar-parent-style {
  display: flex;
  justify-content: space-between;
}
.nav-bar-title-style {
  margin-right: 62px;
  font-size: 22px;
  text-align: center;
  font-family: PingFangSC-Regular;
  color: #fff;
}

.nav-bar-title-right-style {
  font-size: 20px;
  margin-top: 5px;
  font-family: PingFangSC-Regular;
  text-align: center;
  margin-bottom: 11px;
  color: rgba(71, 124, 236, 1);
}
.nav-bar-style {
  /* width: 64px;
  height: 42px; */
  font-size: 30px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  background: #2e71ff;
}

.scan-outside-div-style {
  position: fixed;
  bottom: 220px;
  width: 100%;
  height: auto;
  margin: auto;
}
.scan-div-style {
  width: 162px;
  height: 162px;
  background: rgba(222, 233, 255, 1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.scan-btn-style {
  width: 122px;
  height: 122px;
  color: white;
  background-color: #477cec;
  margin: auto;
  font-size: 48px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 59px;
  letter-spacing: 2px;
}
.out-detail-style {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.over-flow-style {
  width: 100%;
  height: 1200px;
  background: gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0.6;
}
.confirmStyle {
  font-size: 20px;
  align-self: center;
  padding: 10px;
}
.pickerToobarStyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: #477cec;
}
.pickerToolbarContent {
  display: flex;
  align-items: center;
}
.pickerToolbarContentButton {
  padding-left: 10px;
  padding-right: 10px;
  align-items: center;
}
.nav-bar-style {
  background: #2e71ff;
  color: #fff;
}

.titleSignalStyle {
  margin-top: 20px;
  margin-left: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.titleSignalTextValue {
  font-size: 20px;
  margin-left: 10px;
  width: auto;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
}
.billDetailStyle {
  margin-left: 18px;
  margin-right: 18px;
}
.btnStyle {
  width: 90px;
  height: 36px;
}
.btncont {
  width: 100%;
  height: 100%;
}
.comitForm {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
}
.scanCountMoreStyle {
  margin-left: 20px;
  margin-top: 6px;
}
</style>
